<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>JS</title>
    <style>
        *{list-style:none;}
        #banner{
            width:800px;
            margin: 0px auto;
        }
        img{
            width:800px;
            height:400px;
        }
        #play{
            z-index:1;
            width:800px;
            height: 400px;
            position: relative;
        }
        #iconlist{
            position: absolute;
            right:20px;
            bottom:10px;
        }
        #iconlist li{
            float: left;
            width:25px;
            height:25px;
            background-color: #999;
            text-align: center;
            line-height: 25px;
            border-radius: 13px;
            margin-right: 10px;
            color:#fff;
            cursor: pointer;
        }


    </style>
</head>
<body>

    <div id="banner">
        <div id="play">
            <div id="imglist">
                <a href="#"><img src="./imgs/1.jpg" style="display:block;"></a>
                <a href="#"><img src="./imgs/2.jpg" style="display:none;"></a>
                <a href="#"><img src="./imgs/3.jpg" style="display:none;"></a>
                <a href="#"><img src="./imgs/4.jpg" style="display:none;"></a>
                <a href="#"><img src="./imgs/5.jpg" style="display:none;"></a>
            </div>
            <div id="iconlist">
                <ul>
                    <li style="background-color:#f00">1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                </ul>
            </div>
        </div>
    </div><!--END banner-->


    <script>
        //各种获取
        var play = document.getElementById('play');
        var imglist = play.getElementsByTagName('img');
        var iconlist = play.getElementsByTagName('li');

        //设置循环变量
        var m = 1;
        function run(){
            if(m > 4){
                m = 0;
            }
            // console.log(m);
            img(m);//当前第m张图片显示,其他隐藏  
            icon(m);//当前第m个按钮标红,其他不标红
            m++;
        }
        //设置定时
        var timer = setInterval(run,3000);

        //定义显示和隐藏图片的函数
        function img(m){
            for (var i = 0; i < imglist.length; i++) {
                imglist[i].style.display = 'none';
            }
            //当前的m张 要显示
            imglist[m].style.display = 'block';
        }

        //定义标红指定按钮的函数
        function icon(m){
            for (var i = 0; i < iconlist.length; i++) {
                iconlist[i].style.backgroundColor = '#999';
            }
            //当前的m张 要显示
            iconlist[m].style.backgroundColor = '#f00';
        }

        //鼠标划过 轮播图 定时要停止
        play.onmouseover = function (){
            clearInterval(timer);
        }
        //鼠标离开 轮播图 定时要继续
        play.onmouseout = function (){
            timer = setInterval(run, 3000);
        }


        //给所有的按钮 绑定鼠标划过事件
        for (var i = 0; i < iconlist.length; i++) {
            (function(i){
                iconlist[i].onmouseover = function (){
                    img(i);
                    icon(i);
                    m = i + 1;
                }
            })(i)
        };

    </script>

</body>
</html>